<template>
	<view class="wrap">
		<view class="logo">future</view>

		<view v-if="loginType === 1">
			<view class="list">
				<view class="list-call">
          <u--input prefixIcon="account" prefixIconStyle="font-size: 28px;color: #5473e8" type="text" v-model="username" maxlength="11" :placeholder="$t('login.placeholderAccount')" border="none"/>
				</view>
				<view class="list-call">
          <u-input prefixIcon="checkbox-mark" prefixIconStyle="font-size: 28px;color: #5473e8" type="text" v-model="password" maxlength="11" :placeholder="$t('login.placeholderPassword')" border="none" :password="!showPassword"/>
					<image class="u-icon-right" :src="'https://ff-cloud.oss-cn-beijing.aliyuncs.com/app/future/login/eye_' + (showPassword ? 'open' : 'close') + '.png'" @click="showPass()"></image>
				</view>
				<div style="padding:15rpx 0 0;">
					<!-- <view class="register">
						<navigator class="register-link" url="forget" open-type="navigate">{{$t('login.forget')}}</navigator>
					</view> -->
          <u-checkbox-group v-model="remember">
            <u-checkbox activeColor="#5473e8" :label="$t('login.autoLogin')"></u-checkbox>
          </u-checkbox-group>
				</div>
			</view>
			<u-button type="primary"  @click="submit('1')" shape="circle" :customStyle="{width: '80%'}"><text>登录</text></u-button>
		</view>
		<view v-else-if="loginType === 2">
			<view class="list">
				<view class="list-call" >
					<view class="iconfont icon-shouji" style="font-size: 22px;color:#5473e8;"></view>
          <u--input class="u-input" type="number" v-model="phoneNo" maxlength="11" placeholder="请填写手机号" border="none" style="width: 100%;"/>
				</view>
			</view>
      <u-button type="primary" shape="circle" @click="nextStep()" class="button" ><text>下一步</text></u-button>
		</view>
		<view v-else-if="loginType === 3">
      <view class="currentPhone-box">
        <view class="number-text">181****5678</view>
        <view class="other-text">认证服务由中国移动提供。</view>
        <u-button type="primary" shape="circle" @click="submit('3')">本机号码一键登录</u-button>
        <u-button shape="circle" @click="selectLogin(1)">其他登录方式</u-button>
      </view>
		</view>
    <view class="login-bottom-box">
      <u-divider text="更多登录方式"></u-divider>
      <view class="oauth2">
        <u-icon class="u-icon" size="40" color="#f9d39b" name="account-fill" @click="selectLogin(1)"></u-icon>
        <u-icon class="u-icon" size="40" color="#f9d39b" name="phone-fill" @click="selectLogin(2)"></u-icon>
        <u-icon class="u-icon" size="40" color="#f9d39b" name="android-fill" @click="selectLogin(3)"></u-icon>
        <u-button shape="circle" class="custom-style" :hairline="false" open-type="getPhoneNumber" @getphonenumber="wxPhoneLogin()">
          <u-icon class="u-icon" size="40" color="#36c956" name="weixin-circle-fill"></u-icon>
        </u-button>
        <u-icon class="u-icon" size="40" color="#36c956" name="weixin-circle-fill" @click="wxLogin"></u-icon>
        <u-icon class="u-icon" size="40" color="#23a0f0" name="qq-circle-fill" @click="qqLogin"></u-icon>
      </view>
      <view class="copyright">登录即代表您已阅读并同意
        <u-link href="#" text="用户协议"></u-link> 与
        <u-link href="#" text="隐私政策"></u-link>
      </view>
    </view>
    <u-loading-icon :show="isLoading" text="登录中。。。" textSize="18"></u-loading-icon>
    <u-modal :show="show" :title="title" :content='content' :showCancelButton='true' @confirm="confirmWxMaUser()" @cancel="this.show=false"></u-modal>
	</view>
</template>
<script>
/**
 * Copyright (c) 2020-Now http://www.future.com All rights reserved.
 */
export default {
	data() {
		return {
      loginType: 1,
			username: '18112345678',
			password: 'Admin123',
			phoneNo:'18112345678',
			showPassword: false,
      wxMaCode: '',
			remember: [],
			activeColor: '#007aff',
      isLoading: false,
      show: false,
      title: '获取用户信息',
      console: '获取用户信息',
      customStyle: {
				marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				color: 'red',
        width: '50px'
			}
		};
	},
	onLoad() {

	},
	methods: {
    selectLogin(type){
      this.loginType = type
    },
		showPass() {
			this.showPassword = !this.showPassword;
		},
		nextStep(){
			this.$u.api.sendCode({	phoneNo: this.phoneNo,	validCodeType:'2'}).then(res => {
				if (res.code == '200') {
					setTimeout(() => {uni.navigateTo({	url: '/pagework/login/code?phoneNo='+this.phoneNo	});	}, 500);
				}else{
					this.$u.toast(res.msg);
					setTimeout(() => {uni.navigateTo({	url: '/pagework/login/code?phoneNo='+this.phoneNo	});}, 500);
				}
			});
		},
		submit(loginType) {
			if (this.username.length == 0) {
				this.$u.toast('请输入账号')
				return;
			}
			if (this.password.length == 0) {
				this.$u.toast('请输入密码')
				return;
			}
      this.isLoading = true
      this.$store.dispatch('Login',{username: this.username,password: this.password,loginType: 2}).then(() => {
        setTimeout(() => {	uni.switchTab({	url: '/pages/home/index'})	}, 500)
        this.isLoading = false
      }).catch(() => {})
		},

		qqLogin() {
			this.$u.toast('QQ 登录');
      uni.login({provider: 'weixin',success: function(loginRes) {
          console.log(loginRes)
        }
      })
		},
    wxPhoneLogin(e){
      if(e.detail.errMsg == "getPhoneNumber:ok"){
        this.show = true
        this.wxMaCode = e.detail.code
      }else{
          console.log("用户点击了拒绝")
      }
    },
    wxLogin(){
      this.$store.dispatch('WxMaLogin').then(() => {
        setTimeout(() => {	uni.reLaunch({	url: '/pages/home/index'})	}, 500)
      }).catch(() => {})
		},
    confirmWxMaUser(){
      this.show = false
      this.$store.dispatch('WxMaPhoneLogin',{code: this.wxMaCode}).then(() => {
        setTimeout(() => {	uni.switchTab({	url: '/pages/home/index'})	}, 500)
        this.isLoading = false
      }).catch(() => {})
    }
	}
};
</script>
<style lang="scss">
  @import 'index.scss';
  .logo {
    width: 80%;
    font-size:64rpx;
    color: #5473e8;
    margin: 80rpx auto 80rpx auto;
  }
  .list-call-icon{
    color: #ff0000;
  }
  .currentPhone-box{
    text-align: center;
    padding: 40rpx 80rpx;
    .number-text{
      color: #000000;
      font-size: 60rpx;
    }
    .other-text{
      color: #999999;
      font-size: 26rpx;
      padding: 20rpx 0;
    }
    .u-btn{
      margin: 30rpx auto;
    }
    .u-hairline-border{
        border: 1px solid #fff;
    }
  }

  .oauth2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0rpx 100rpx 30rpx;
    image {
      height: 80rpx;
      width: 80rpx;
    }
  }

  .login-bottom-box{
    position: fixed;
    bottom:20px;
    text-align: center;
    width: 100%;
  }
  .copyright{
    text-align: center;
    color: #939393;
    width: 100%;
    font-size: 24rpx;
    .u-link{
      display: inline!important;
      margin: 0 10rpx;
      font-size: 24rpx!important;
    }
  }
</style>
